<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>我的课程</text>
			</view>
			<view class="head_mid">
				{{title}}
			</view>
			<view class="head_right" v-if="change==true" @tap="updateClass">
				提交
			</view>
			<view class="head_right" v-else >
				<!-- 确定预约 -->
			</view>
		</view>
		<view class="padding-box">
			<view class="item1Box" @click="name">
				<text>日期</text>
				<view class="item1Box_right">
					<text>{{inputValue}}</text>
					<image src="../../../static/right.png" mode=""></image>
				</view>
			</view>
			<view class="item1Box" @tap="toSelectTheme">
				<text>类别</text>
				<view class="item1Box_right">
					<text v-if="Theme_name!=''">{{Theme_name}}</text>
					<image src="../../../static/right.png" mode=""></image>
				</view>
			</view>
			<view class="tememBox" v-if="Theme_item!=''">
				《{{Theme_item}}》
			</view>
			<view class="item1Box">
				<view class="" v-for="(item,index) in timeList" :class="{fontActive:index===menuIndex}" :key="index" @tap="selectMenu(index)">
					{{item.name}}
					<view v-show="menuIndex===index" class="data-active"></view>
				</view>
			</view>
			<view class="timeBox" v-if="timeItem.length!=0">
				<view class="time_item" v-for="(item,index) in timeItem" :key="index" @tap="selectTime(index)" :class="{timeActive:index===timeIndex}">
					{{item}}
				</view>
			</view>
			<view class="timeBox" v-else>
				<view class="noUser">
					暂无设置该时间段的课程
				</view>
			</view>

		</view>
		<view class="common-body">
			<view class="conent_body" v-for="(item,index) in userList" :key="index">
				<!-- @tap="toMasterDetile(item.user_id)" -->
				<!-- <view class="selectImgBox" @tap="selectTeacher2($event)"> -->
				<view class="">
					<image class="selectImg" v-show="item.select===true" src="../../../static/wode/select.png" mode="" @tap.stop="selectTeacher(index,item.language,item.map.masterinfo,item.id)"></image>
					<image class="selectImg" v-show='item.select===false' src="../../../static/wode/unselect.png" mode="" @tap.stop="selectTeacher(index,item.language,item.map.masterinfo,item.id)"></image>
				</view>

				<!-- </view> -->


				<view class="">

					<view class="left_body">
						<image mode="aspectFill" :src="item.map.userinfo.avatar"></image>
						<image class="countryimg" v-show="item.map.userinfo.national_flag" :src="item.map.userinfo.national_flag" mode=""></image>
					</view>

					<view class="right_body">
						<view class="title_box">
							<view class="nickname-and">
								<text class="nickname textOverflow" v-text="item.map.userinfo.nick_name"></text>
							</view>
							<view class="img-sex">
								<image class="image_box" v-if="item.map.userinfo.sex==2" src="/static/woman.png"></image>
								<image class="image_box" v-else src="/static/man.png"></image>
							</view>
							<view class="authentication_box shenfen">{{item.shenfen}}</view>
						</view>


						<view class="common_ys textOverflow">
							掌握语言:
							<text>{{item.language}}</text>

						</view>
						<view class="common_ys textOverflow">
							累计上课{{item.map.classCount}}节 累计学生{{item.map.studentCount}}人
						</view>
					</view>
				</view>

				<!-- <view class="address-and">
					<view class="teachLanguage">
						英语
					</view>
					<text src="/static/jingyou/liaoliao.png" mode="">{{item.map.masterprice}}元/月</text>
				</view> -->
			</view>
			<view class="noUser" v-if="userList==''">
				暂无符合条件的助学师
			</view>
		</view>
		<view class="btn_box">
			<view class="btn" @tap="goAppointment">
				确认预约
			</view>
		</view>
		<view class="modalBox" v-if="showNav==true">
			<view class="titleText">
				当前助学师有多门教学语言，请选择教学语言
			</view>
			<view class="languageBox">
				<view class="languageItem" v-for="(item,index) in languageList" :key="index" @tap="selectLanguage(index)" :class="{active:languageIndex===index}">
					{{item}}
				</view>
			</view>
			<view class="modal_bottom">
				<view class="modal_btn text1" @tap="closeModal">
					取消
				</view>
				<view class="modal_btn text2" @tap="sureModal">
					确定
				</view>
			</view>
		</view>
		<sen-set-picker ref="setpicker" :shixian="shixian"  @quxiaoButton="quxiaobutton" @quedingButton="quedingbutton"></sen-set-picker>
		<mask :isShowMask='isShowMask'></mask>

	</view>
</template>

<script>
	import senSetPicker from '../../../components/sen-pickerview/picker-view-set.vue'
	import mask from '../../../components/mask.vue'
	// import Vue from 'vue'
	export default {
		components: {
			senSetPicker,
			mask
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				timeList: [{
						name: '凌晨',
						time: ['00:00~00:30', '00:30~01:00', '01:00~01:30', '01:00~01:30', '02:00~02:30', '02:30~03:00', '03:00~03:30',
							'03:30~04:00', '04:00~04:30', '04:30~05:00', '05:00~05:30', '05:30~06:00'
						]
					},
					{
						name: '早上',
						time: ['06:00~06:30', '06:30~07:00', '07:00~07:30', '07:30~08:00']
					},
					{
						name: '上午',
						time: ['08:00~08:30', '08:30~09:00', '09:00~09:30', '09:30~10:00', '10:00~10:30', '10:30~11:00', '11:00~11:30',
							'11:30~12:00'
						]
					},
					{
						name: '中午',
						time: ['12:00~12:30', '12:30~13:00', '13:00~13:30', '13:30~14:00']
					},
					{
						name: '下午',
						time: ['14:00~14:30', '14:30~15:00', '15:00~15:30', '15:30~16:00', '16:00~16:30', '16:30~17:00', '17:00~17:30',
							'17:30~18:00'
						]
					}, {
						name: '晚上',
						time: ['18:00~18:30', '18:30~19:00', '19:00~19:30', '19:30~20:00', '20:00~20:30', '20:30~21:00', '21:00~21:30',
							'21:30~22:00', '22:00~22:30', '22:30~23:00', '23:00~23:30', '23:30~23:59'
						]
					}
				],
				timeItem: ['00:00~00:30', '00:30~01:00', '01:00~01:30', '01:00~01:30', '02:00~02:30', '02:30~03:00', '03:00~03:30',
					'03:30~04:00', '04:00~04:30', '04:30~05:00', '05:00~05:30', '05:30~06:00'
				],
				menuIndex: 0,
				timeIndex: 0,
				languageIndex: '',
				inputValue: currentDate,
				shixian: false,
				userList: '',
				theTime: '00:00~00:30',
				Theme_name: '',
				Theme_item: '',
				teacherTrue: false,
				languageList: [],
				masterinfo: '', //选择的助学师资料
				isShowMask: false,
				showNav: false,
				haveLanguage: false,
				type: '', //学习卡类别
				appointment_id: '', //课程id,
				change: '', //判断是否是修改
				option: '',
				title: '',
				classList:[],//课程列表
				master_id: '',//助学师id
				id:'',//修改前的课程id
				calssId:'',//修改后课程id
			}
		},
		onLoad(option) {
			// this.option=option;
			this.type = option.type;
			// console.log(this.option,'option')
			if (option.change != undefined && option.change != '') {
				this.change = true
				this.title = '修改'
				this.Theme_name = option.Theme_name
				this.Theme_item = option.Theme_item
				this.master_id = option.master_id
				this.id=option.id
				console.log(option, 'option')
				this.getTimeDate('00:00', '06:00')
				this.getUserList()
			} else {
				this.title = '预约课程'
			}
		},
		onShow() {
			if (uni.getStorageSync('Theme_name') != undefined || uni.getStorageSync('Theme_name') != '') {
				this.Theme_name = uni.getStorageSync('Theme_name')
			}
			if (uni.getStorageSync('Theme_item') != undefined || uni.getStorageSync('Theme_item') != '') {
				this.Theme_item = uni.getStorageSync('Theme_item')
			}
			console.log(this.Theme_name + '/' + this.Theme_item)
		},
		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
				console.log(1)
			},
			selectMenu(index) {
				this.menuIndex = index
				console.log(this.change)
				if (this.change == true) {
					var start = this.timeList[index].time[0].split('~')[0];
					var end = this.timeList[index].time[this.timeList[index].time.length - 1].split('~')[1];
					this.getTimeDate(start, end)
				} else {
					this.timeItem = this.timeList[index].time
					this.timeIndex = 0
				}

			},
			selectTime(index) {
				this.timeIndex = index;
				this.theTime = this.timeItem[index];
				if(this.change==true){
					this.calssId=this.classList[index].id
				}
				this.getUserList()
				
			},
			getTimeDate(time1, time2) {
				var me = this;
				var data = {
					user_id: this.master_id,
					offset: new Date().getTimezoneOffset() / 60 * -1,
					start_time: this.inputValue + ' ' + time1 + ':00',
					end_time: this.inputValue + ' ' + time2 + ':00'
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'masterAppointment',
					actionName: 'querySchedule',
					data: data,
					successBack: function(res) {
						console.log(res, '老师设置的时间');
						me.timeItem = [];
						if (res.data.data != null) {
							for (var i = 0; i < res.data.data.length; i++) {
								res.data.data[i].start_time = res.data.data[i].start_time.split(' ')
								res.data.data[i].end_time = res.data.data[i].end_time.split(' ')
								res.data.data[i].timeNum = res.data.data[i].start_time[1].substr(0, 5) + '~' + res.data.data[i].end_time[1].substr(
									0, 5)
								me.timeItem.push(res.data.data[i].timeNum)
							}
							me.classList=res.data.data
						}

					}
				})
			},
			getUserList() {
				if (this.inputValue == '') {
					uni.showToast({
						title: '请选择日期',
						icon: 'none'
					})
					return
				} else if (this.Theme_name == '') {
					uni.showToast({
						title: '请选择类别',
						icon: 'none'
					})
					return
				} else if (this.Theme_item == '') {
					uni.showToast({
						title: '请选择主题',
						icon: 'none'
					})
					return
				}
				var me = this;
				var shiqu = new Date().getTimezoneOffset() / 60 * -1
				var time = this.theTime.split('~')
				console.log(this.inputValue + ' ' + time[0] + ':00', '时间')
				if (this.change == true) {
					var data = {
						master_id: this.master_id,
						offset: shiqu,
						type: this.type
					}
				} else {
					var data = {
						offset: shiqu,
						start_time: this.inputValue + ' ' + time[0] + ':00',
						end_time: this.inputValue + ' ' + time[1] + ':00',
						type: this.type,
					}
				}

				this.myAjaxNew({
					model: 'user',
					controllerName: 'masterAppointment',
					actionName: 'queryAppointmentListPage',
					data: data,
					successBack: function(res) {
						console.log(res, '助学师')
						me.userList = res.data.data
						for (var j = 0; j < me.userList.length; j++) {
							me.userList[j].shenfen = []
							me.userList[j].language = []
						}
						for (var i = 0; i < me.userList.length; i++) {
							me.userList[i].select = false
							for (var j = 0; j < me.userList[i].map.masterinfo.length; j++) {
								if (me.userList[i].map.masterinfo[j].recommend_type == 'major') {
									me.userList[i].map.masterinfo[j].recommend_type = '专业助学师'
								} else if (me.userList[i].map.masterinfo[j].recommend_type == 'cross_border') {
									me.userList[i].map.masterinfo[j].recommend_type = '跨境助学师'
								} else if (me.userList[i].map.masterinfo[j].recommend_type == 'mother_tongue') {
									me.userList[i].map.masterinfo[j].recommend_type = '母语助学师'
								} else if (me.userList[i].map.masterinfo[j].recommend_type == 'private_education') {
									me.userList[i].map.masterinfo[j].recommend_type = '私教'
								}
								me.userList[i].shenfen.push(me.userList[i].map.masterinfo[j].recommend_type)
								me.userList[i].language.push(me.userList[i].map.masterinfo[j].mother_tongue + '(母语)')
								me.userList[i].language.push(me.userList[i].map.masterinfo[j].teach_language)
								me.userList[i].language.push(me.userList[i].map.masterinfo[j].language)


							}

							me.userList[i].shenfen = me.removalArr(me.userList[i].shenfen)
							me.userList[i].shenfen = me.userList[i].shenfen.join('/')
							me.userList[i].language = me.removalArr(me.userList[i].language)
							me.userList[i].language = me.userList[i].language.join('/')

							console.log(me.userList[i].language)
						}
					}
				})
			},
			removalArr(arr) { //去重
				var arrs = [];
				for (var b = 0; b < arr.length; b++) {
					if (arr[b] != "") {
						if (arrs.indexOf(arr[b]) == -1) {
							arrs.push(arr[b])
						};
					}

				}
				return arrs;
			},
			name: function() {
				this.$refs.setpicker.confirm(this.inputValue);
				this.shixian = true;
			},
			quxiaobutton: function() {
				this.shixian = false;
			},
			quedingbutton: function(bangdingyear, bangdingmonth, bangdingday) {
				this.shixian = false;
				this.inputValue = bangdingyear + "-" + bangdingmonth + "-" + bangdingday;
				if (this.Theme_name != '' && this.Theme_item != '') {
					this.getUserList()
				}
			},
			getDate(type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				} else if (type === 'now') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			},
			toSelectTheme() {
				uni.navigateTo({
					url: '../../../pages/My/selectClassTheme/selectClassTheme'
				})
			},
			selectTeacher(index, language, item, id) {
				var obj = this.userList[index]
				if (this.userList[index].select == true) {
					obj.select = false
					this.teacherTrue = false;
					this.masterinfo = ''
					this.languageList = [];
					this.appointment_id = '';
				} else {
					for (var i = 0; i < this.userList.length; i++) {
						this.userList[i].select = false
					}
					obj.select = true
					this.teacherTrue = true;
					this.masterinfo = item;
					this.appointment_id = id;
					this.languageList = language.split('/');
				}
				this.userList.splice(index, 1, obj)
				console.log(this.userList[index].select)

			},
			// selectTeacher2(e) {
			// 	if (e.target.className.indexOf("") == -1) {
			// 		e.target.className = "selectImgBox selectImgBox2"; //切换按钮样式
			// 		//写逻辑
			// 	} else {
			// 		e.target.className = "selectImgBox"; //切换按钮样式
			// 		//写逻辑
			// 	}
			// },
			selectLanguage(index) {
				this.languageIndex = index
				this.haveLanguage = true;
			},
			closeModal() {
				this.showNav = false;
				this.isShowMask = false;
			},
			sureModal() {
				if (this.haveLanguage == true) {
					this.sureAppointment()
				} else {
					uni.showToast({
						title: '请选择语言',
						icon: 'none'
					})
				}

			},
			goAppointment() {
				if(this.Theme_item==''||this.Theme_name==''){
					uni.showToast({
						title: '请选择主题',
						icon: 'none'
					})
					return
				}
				if (this.teacherTrue == false) {
					uni.showToast({
						title: '请选择助学师',
						icon: 'none'
					})
					return
				}

				if (this.masterinfo.user_id == uni.getStorageSync('user_id')) {
					uni.showToast({
						title: '不能预约自己哦',
						icon: 'none'
					})
					return
				}
				// if (this.languageList.length > 1) {//选语言
				// 	this.showNav = true;
				// 	this.isShowMask = true;
				// 	return
				// }
				this.sureAppointment()
			},
			sureAppointment() {
				var me = this
				var offset = (new Date().getTimezoneOffset() / 60) * -1
				var data = {
					user_id: uni.getStorageSync('user_id'),
					master_id: this.masterinfo[0].user_id,
					appointment_id: this.appointment_id,
					offset: offset,
					master_type: this.type,
					start_time: this.inputValue + ' ' + this.theTime.split('~')[0] + ':00',
					end_time: this.inputValue + ' ' + this.theTime.split('~')[1] + ':00',
					title: this.Theme_name + '/' + this.Theme_item
				}
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'userAppointment',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res)
						if (res.data.message == '成功') {
							uni.showToast({
								title: '预约成功',
								icon: 'none'
							})
							me.isShowMask = false
							me.showNav = false
							uni.removeStorageSync('Theme_name')
							uni.removeStorageSync('Theme_item')
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}

					}
				})
			},
			updateClass(){
				if(this.Theme_item==''||this.Theme_name==''){
					uni.showToast({
						title: '请选择主题',
						icon: 'none'
					})
					return
				}
				if (this.teacherTrue == false) {
					uni.showToast({
						title: '请选择助学师',
						icon: 'none'
					})
					return
				}
				var me=this;
				var data={
					update_type:'update',
					id:this.id,
					update_identity:'user',
					update_appointment_id:this.calssId,
					update_title:this.Theme_name+'/'+this.Theme_item
				}
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'userAppointment',
					actionName: 'update',
					data: data,
					successBack: function(res) {
						console.log(res)
						if(res.data.message=='成功'){
							uni.navigateBack({
								delta:1
							})
							uni.showToast({
								title:'成功提交修改申请',
								icon:'none'
							})
						}else{
							uni.showToast({
								title:res.data.message,
								icon:'none'
							})
						}
					}
				})
				
			},
		}
	}
</script>

<style scoped>
	.head {
		height: 162upx;
		display: flex;
		justify-content: space-between;
		font-size: 32upx;
		padding: 0 24upx;
		background: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
	}

	.head image {
		height: 36upx;
		width: 20upx;
		margin-right: 9upx;
	}

	.head_left {
		display: flex;
		align-items: center;
		color: #666666;
		padding-top: 70upx;
	}

	.head_mid {
		font-size: 36upx;
		color: #333333;
		padding-top: 90upx;
	}

	.head_right {
		color: #46CECF;
		padding-top: 70upx;
		width: 156upx;
		/* padding-left: 30upx; */
		text-align: right;
	}

	.set {
		width: 100%;
	}

	.set button {
		width: 50%;
		float: right;
		line-height: 60upx;
	}

	.zhi {
		width: 50%;
		float: left;
		line-height: 60upx;
	}

	.padding-box {
		padding-top: 182upx;
	}

	.item1Box {
		background: #FFFFFF;
		color: #333333;
		font-size: 32upx;
		display: flex;
		justify-content: space-between;
		padding: 0 24upx;
		height: 88upx;
		line-height: 88upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.item1Box_right {
		display: flex;
		align-items: center;
		font-size: 28upx;
	}

	.item1Box_right image {
		width: 16upx;
		height: 28upx;
		margin-left: 30upx;
	}

	.tememBox {
		background: #FFFFFF;
		text-align: right;
		color: #999999;
		font-size: 28upx;
		height: 88upx;
		line-height: 88upx;
		padding: 0 24upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.fontActive {
		color: #46CECF;
	}

	.data-active {
		height: 6upx;
		background-color: #46CECF;
		border-radius: 8upx;
		position: relative;
		top: -4upx;
	}

	.timeBox {
		display: flex;
		flex-wrap: wrap;
		height: 210upx;
		background: #FFFFFF;
		padding: 24upx 50upx;
	}

	.time_item {
		height: 45upx;
		line-height: 45upx;
		text-align: center;
		width: 146upx;
		border-radius: 20upx;
		border: 1upx solid #E6E6E6;
		color: #999999;
		font-size: 20upx;
		margin-right: 12upx;
	}

	.time_item:nth-child(4) {
		margin-right: 0;
	}

	.timeActive {
		background: #46CECF;
		color: #FFFFFF;
	}

	.conent_body {
		height: 125upx;
		padding: 30upx 24upx;
		border-bottom: 1upx solid #F3F3F3;
		background: #fff;
		position: relative;
		display: flex;
		align-items: center;
	}

	.left_body {
		width: 125upx;
		height: 125upx;
		float: left;
		position: relative;
		margin-right: 30upx;

	}

	.right_body {
		height: 125upx;
		display: flex;
		flex-direction: column;

	}

	.title_box {
		display: flex;
		align-items: center;
		position: relative;
		justify-content: flex-start;
	}

	.nickname-and {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nickname {
		max-width: 200upx;
		font-size: 30upx;
		line-height: 40upx;
		margin-right: 10upx;
	}


	.image_box {
		width: 35upx;
		height: 37upx;
	}

	.left_body image {
		width: 125upx;
		height: 125upx;
		border-radius: 50%;

	}

	.left_body .countryimg {
		width: 33upx;
		height: 33upx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.address-and image {
		width: 55upx;
		height: 55upx;
		margin-top: 28upx;
	}


	.address-and {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
		color: #46CECF;
		font-size: 28upx;
	}

	.shenfen {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 300upx;
		margin-left: 10upx;
		padding: 0 6upx;
		color: #32CCCC;
		font-size: 18upx;
		border: 1upx solid #00BCBB;
	}

	.common_ys {
		width: 450upx;
		font-size: 26upx;
		line-height: 40upx;
		color: #999999;
	}

	.common_ys text {
		margin: 0 10upx;
	}

	.teachLanguage {
		height: 28upx;
		line-height: 28upx;
		color: #FFFFFF;
		font-size: 20upx;
		background: #46CECF;
		border-radius: 5px;
		padding: 0 10upx;
		margin-bottom: 36upx;
	}

	.common-body {
		margin-top: 20upx;
	}

	.image_box {
		width: 35upx;
		height: 37upx;
	}

	.selectImg {
		width: 29upx;
		height: 29upx;
		margin-right: 20upx;
	}

	.noUser {
		width: 100%;
		text-align: center;
		color: #CCCCCC;
		font-size: 26upx;
		line-height: 300upx;
	}

	/* 模态弹框 */
	.modalBox {
		width: 492upx;
		height: 386upx;
		background: #FFFFFF;
		border-radius: 20upx;
		padding-top: 40upx;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		justify-content: space-between;
		z-index: 3000;
		position: absolute;
		left: 129upx;
		top: 460upx;
	}

	.titleText {
		color: #333333;
		font-size: 28upx;
		padding: 0 34upx;
		font-weight: bold;
	}

	.languageBox {
		display: flex;
		justify-content: space-between;
		padding: 0 34upx;
		flex-wrap: wrap;
		color: #333333;
		font-size: 24upx;
	}

	.languageItem {
		border: 1upx solid #E6E6E6;
		border-radius: 10upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		padding: 0 15upx;
		margin: 20upx 0;

	}

	.modal_bottom {
		display: flex;
		width: 100%;
	}

	.modal_btn {
		border: 1upx solid #E6E6E6;
		text-align: center;
		line-height: 78upx;
		height: 78upx;
		font-size: 28upx;
		width: 50%;
	}

	.text1 {
		color: #CCCCCC;
	}

	.text2 {
		color: #47CECF;
	}

	.active {
		color: #47CECF;
		border: 1upx solid #47CECF;
	}
	.btn_box{
		background: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		padding: 20upx 0;
	}
</style>
